<template>
  <div class="c-bg-sgray">
    <new-search-bar class="c-bg-white" :searchFixed="true" :placeholder="请输入社群名称" @search="startSearch" @cancel="startSearch"></new-search-bar>

    <div class="c-ph24 c-pt24">
      <div @click="clickMySocialGroupItem(index)" v-for="(item,index) in socialGroupList" :key="index" class="c-ph24 c-pv24 c-br16 c-mb16 c-bg-white c-flex-row c-aligni-center">
        <img :src="$addXossFilter(item.avatar, require('@/assets/defult_head.png'))" class="c-ww120 c-hh120 c-brp50" alt="">
        <div class="c-flex-column c-justify-sb c-pl20 c-flex-grow1 c-w0 c-hh120">
          <div class="c-fs24 c-text-ellipsis1 c-fw600">{{item.name}}</div>
          <div class="c-fs20 c-fc-gray c-text-ellipsis1">{{item.intro}}</div>
          <div class="c-fs20 c-fc-gray">{{item.lastTime ? '上次学习时间：' + item.lastTime : ''}}</div>
        </div>
      </div>
      <div class="c-fc-sgray c-fs20 c-textAlign-c c-pv20" @click="getGroupList(socialName)" v-show="dataStatus == 'HAS_MORE_DATA'">{{'加载更多>'}}</div>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无社群"></loading-status-tem>
    </div>
    <div v-if="isRecommend == 1 && recommendGroupList.length > 0">
      <div class="c-pt100 c-flex-row c-aligni-center c-justify-center c-pb48">
        <span class="c-line-w100-d5"></span>
        <span class="c-fs24 c-fc-gray c-ph48">社群推荐</span>
        <span class="c-line-w100-d5"></span>
      </div>

      <div class="c-ph24 c-pb24">
        <div @click="clickSocialGroupItem(index)" v-for="(item,index) in recommendGroupList" :key="index">
          <social-group-item :isShowPeopleNumber="socialRoomConfs.isShowPeopleNumber" :item='item' class="c-br12 c-mb24"></social-group-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import socialGroupItem from "@/components/templates/socialGroupItem.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import {
  utilJs
} from "@/utils/common.js";
const LIMIT = 10; //每页显示多少条数据
let pageIndex = 1; //当前页面
export default {
  name: "MySocialGroup",
  components: {
    loadingStatusTem,
    socialGroupItem,
    newSearchBar,
  },
  props: [],
  data() {
    return {
      dataStatus: 'HAS_MORE_DATA',
      socialGroupList: [],
      recommendGroupList: [],
      socialName: '',
      isRecommend: 0,
      socialRoomConfs:''
    };
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    //获取社群配置
    getSocialRoomConfs() {
      utilJs.getMethod(`${global.apiurl}socialRoomExtend/getSocialRoomConfs`,
      res => {
        this.socialRoomConfs = res
      })
    },
    clickMySocialGroupItem(index) {
      this.$routerGo(this, "push", {
        path: "/homePage/socialGroup/socialGroupInfo",
        query: {
          SocialRoomId: this.socialGroupList[index].socialRoomId
        }
      });
    },
    clickSocialGroupItem(index) {
      this.$routerGo(this, "push", {
        path: "/homePage/socialGroup/socialGroupInfo",
        query: {
          SocialRoomId: this.recommendGroupList[index].socialRoomId
        }
      });
    },
    //搜索
    startSearch: function (e) {
      pageIndex = 1;
      this.socialName = e.searchValue
      this.getGroupList(e.searchValue);
    },
    //获取我的社群列表和推荐社群
    getMyGroupList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      // this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}social/mySocial?page=1&limit=${LIMIT}`,
        res => {
          // this.socialGroupList = res.mySocialRoom.data;
          this.recommendGroupList = res.recommend;
          this.isRecommend = res.isRecommend;
          // if (res.mySocialRoom.to * 1 == res.mySocialRoom.total * 1) {
          //   this.dataStatus = res.mySocialRoom.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          // } else {
          //   this.dataStatus = 'HAS_MORE_DATA';
          //   pageIndex++;
          // }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },

    //获取社群列表
    getGroupList(searchText) {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}social/getMoreMySocial?socialName=${searchText}&page=${pageIndex}&limit=${LIMIT}`,
        res => {
          if (pageIndex == 1) {
            this.socialGroupList = res.data;
          } else {
            this.socialGroupList = [...this.socialGroupList, ...res.data];
          }
          if (res.data && (res.data.length < LIMIT)) {
            this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex++;
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "我的社群", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("我的社群", "", shareUrl, "");
    },
    initData() {
      pageIndex = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.socialGroupList = [];
      this.socialName = "";
      this.getGroupList(this.socialName);
    },
  },
  activated() {
    setDocumentTitle("我的社群");// eslint-disable-line
    // pageIndex = 1;

    // this.socialGroupList = [];
    // this.dataStatus = 'HAS_MORE_DATA';
    this.isRecommend = 0;
    this.getMyGroupList();
    this.getSocialRoomConfs()
    if (utilJs.checkNeedInitData(this.socialGroupList, pageIndex)) {
      // this.getMore();
      this.initData()
    }
    this.wechatShare();
  },
  deactivated() {
    // this.dataStatus = 'NO_MORE_DATA';
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
